<template>
    <div>
        <section class="menu-block">
            <h2>显示loading</h2>
            <div class="menu-block">
                <pre v-highlightA>
                    <code>
import { page } from 'fzHybrid'
...
page.showLoading({title:''})    //显示loading
page.hideLoading()  //隐藏loading
                     </code>
                </pre>
                <van-button size="large" type="primary" @click="showLoadingClick">点击显示Loading</van-button>
            </div>
        </section>
        <section class="menu-block">
            <h2>显示当前页悬浮窗</h2>
            <div class="menu-block">
                <pre v-highlightA>
                    <code>
import { page } from 'fzHybrid'
...
page.showFloatView()
                     </code>
                </pre>
                <van-button size="large" type="primary" @click="showFloatViewClick">点击显示悬浮窗</van-button>
            </div>
        </section>
        <section class="menu-block">
            <h2>隐藏当前页悬浮窗</h2>
            <div class="menu-block">
                <pre v-highlightA>
                    <code>
import { page } from 'fzHybrid'
...
page.hideFloatView()
                    </code>
                </pre>
                <van-button size="large" type="primary" @click="hideFloatViewClick">点击隐藏悬浮窗</van-button>
            </div>
        </section>
        <section class="menu-block">
            <h2>设置悬浮窗样式</h2>
            <div class="menu-block">
                <pre v-highlightA>
                    <code>
import { page } from 'fzHybrid'
...
page.setFloatView({
    img: "",        //悬浮窗显示图片url，必填
    href: "",       //点击悬浮窗跳转链接，必填
    width: 60,      //悬浮窗宽度，默认60
    height: 60,     //悬浮窗高度，默认60
    margin: {       //悬浮窗外边距
        left:0,
        top:0,
        right:0,
        bottom:0
    },
    alphaNormal: 1, //悬浮窗正常情况下透明度，默认为1，取值范围0~1
    alphaDrag: 1,   //悬浮窗拖拽情况下透明度，默认为1，取值范围0~1
    dragEnable: true,//悬浮窗是否可拖拽，默认为true
    adsorbEnable: true//悬浮窗是否边缘吸附，默认为true
})
                    </code>
                </pre>
                <van-cell-group>
                    <van-field v-model="img" label="img" placeholder="请输入img" />
                    <van-field v-model="href" label="href" placeholder="请输入href" />
                    <van-field v-model="width"  type="number" label="width" placeholder="请输入width" />
                    <van-field v-model="height" type="number" label="height" placeholder="请输入height" />
                    <van-field v-model="margin" label="margin" placeholder="请输入margin" />
                    <van-field v-model="alphaNormal" type="number" label="alphaNormal" placeholder="请输入alphaNormal" />
                    <van-field v-model="alphaDrag" type="number" label="alphaDrag" placeholder="请输入alphaDrag" />
                    <van-cell>
                        <van-checkbox v-model="adsorbEnable">adsorbEnable</van-checkbox>
                    </van-cell>
                    <van-cell>
                        <van-checkbox v-model="dragEnable">dragEnable</van-checkbox>
                    </van-cell>
                </van-cell-group>
                <van-button size="large" type="primary" @click="setFloatViewClick">点击设置悬浮窗样式</van-button>
            </div>
        </section>
        <section class="menu-block">
        <h2>监听页面可见</h2>
        <div class="menu-block">
            <pre v-highlightA>
                <code>{{onPageDidAppearCode}}</code>
            </pre>
            <van-button size="large" type="primary" @click="onPageDidAppearClick">点击开始监听页面可见</van-button>
            <code>状态:{{onPageDisAppearInfo}}</code>
        </div>
      </section>
      <section class="menu-block">
        <h2>监听页面不可见</h2>
        <div class="menu-block">
            <pre v-highlightA>
                <code>{{onPageDidDisappearCode}}</code>
            </pre>
            <van-button size="large" type="primary" @click="onPageDidDisappearClick">点击开始监听页面不可见</van-button>
            <code>状态:{{onPageDisDisappearInfo}}</code>
        </div>
      </section>

  </div>
</template>

<script>
import {Button, CellGroup, Cell, Field, Notify, Checkbox} from 'vant'
import { page } from 'MTHybrid'

export default {
    data () {
        return {
            img: 'https://apprn.tingmimi.net/h5/app/static/img/main-activity-gif.07390ac.gif',
            href: 'https://appdist.tingmimi.net/h5/mainMeeting1.html?uid=1',
            width: 100,
            height: 100,
            margin: '{"left":5,"top":5,"right":5,"bottom":5}',
            alphaNormal: 0.8,
            alphaDrag: 1,
            dragEnable: true,
            adsorbEnable: true,
            onPageDidAppearCode: 'import {page} from \'fzHybrid\'\n...\n//参数，function(info){}\npage.onPageDidAppear(function (data) {\n    console.log(data)\n})',
            onPageDisAppearInfo: '',
            onPageDidDisappearCode: 'import {page} from \'fzHybrid\'\n...\n//参数，function(info){}\npage.onPageDidDisappear(function (data) {\n    console.log(data)\n})',
            onPageDisDisappearInfo: ''
        }
    },
    methods: {
        showLoadingClick () {
            page.showLoading({title: '加载中...'})
            setTimeout(function () {
                page.hideLoading()
            }, 3000)
        },
        hideLoadingClick () {
            page.hideLoading()
        },
        showFloatViewClick () {
            page.showFloatView()
        },
        hideFloatViewClick () {
            page.hideFloatView()
        },
        setFloatViewClick () {
            var marginObj = JSON.parse(this.margin)

            page.setFloatView({
                img: this.img,
                href: this.href,
                width: parseFloat(this.width),
                height: parseFloat(this.height),
                margin: marginObj,
                alphaNormal: parseFloat(this.alphaNormal),
                alphaDrag: parseFloat(this.alphaDrag),
                dragEnable: this.dragEnable,
                adsorbEnable: this.adsorbEnable
            })
        },
        onPageDidAppearClick () {
            Notify({
                message: '开始监听页面可见',
                duration: 1000,
                background: '#1989fa'
            })
            var thiz = this
            page.onPageDidAppear(function (data) {
                thiz.onPageDisAppearInfo = data
                console.info(data)
            })
        },
        onPageDidDisappearClick () {
            Notify({
                message: '开始监听页面不可见',
                duration: 1000,
                background: '#1989fa'
            })
            var thiz = this
            page.onPageDidDisappear(function (data) {
                thiz.onPageDisDisappearInfo = data
                console.info(data)
            })
        }
    },
    components: {
        [Button.name]: Button,
        [Cell.name]: Cell,
        [CellGroup.name]: CellGroup,
        [Field.name]: Field,
        [Notify.name]: Notify,
        [Checkbox.name]: Checkbox
    }
}
</script>

<style>
    @import '../../../static/css/index.css';
    .menu-block {
        padding: 0 0.2rem
    }
    h2 {
        margin-block-start: 0.83em;
        margin-block-end: 0.83em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
        margin: 0;
        /* font-weight: 200; */
        font-size: 18px;
        color: rgba(69,90,100,.6);
        padding: 20px 15px 15px;
    }
</style>
